<template>
  <view class="list">
    <cu-custom bgColor="bg-navigation-main" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">123123</block>
      <view slot="right"
        ><text class="cuIcon-roundadd" style="font-size: 20px"></text
      ></view>
      <!-- <view slot="right" @tap="synchronization" style="margin-left:10px;font-size:16px">同步通讯录</view> -->
    </cu-custom>
    <button @click="open" style="z-index: 9999; position: absolute; bottom: 0">
      打开
    </button>
    <button @click="open2" style="z-index: 9999; position: absolute; bottom: 0;left:200rpx">
      打开2
    </button>
    <XYCalendar
      ref="calender"
      :markers="markers"
      v-model="selectedDate"
      @change="changePage"
    />
    @change="" @nextpage="" @prepage="" @open="" @forwardright @forwardleft
    @reset @forwardup @forwarddown
  </view>
</template>

<script>
import XYCalendar from "../../components/xy-calender.vue";
export default {
  components: {
    XYCalendar,
  },
  data() {
    return {
      title: "Hello",
      CustomBar: this.CustomBar,
      currentWeek: [],
      currentMonth: [],
      realDisplayInScreenData: [],
      page: 0,
      disabledBefore: [],
      disabledAfter: [],
      position: {
        start: 0,
        end: 0,
      },
      show: true,
      currentDate: null,
      currentMonthIndex: 0,
      mode: "week",
      currentMonthsss: null,
      markers: [
        { date: "2024-06-29", color: "lawngreen", text: "节假日" },
        { date: "2024-06-28", color: "lawngreen", text: "节假日" },
      ],
      selectedDate: this.moment("2024-06-29"),
    };
  },
  watch: {
    selectedDate() {
      // console.log(this.selectedDate.format("YYYY-MM-DD"));
    },
  },
  onLoad() {},
  mounted() {},
  methods: {
    initPage() {
      this.getCurrentWeeks();
      //   this.getCurrentMonth();
      this.selectedDate = this.moment("2024-06-29");
    },
    getCurrentWeeks() {
      let array = new Array(7).fill("0");
      let moment = this.moment();
      this.currentWeek = array.map((item, index) => {
        return this.moment()
          .isoWeekday(index + 1 + this.page * 7)
          .format("YYYY-MM-DD");
      });
      console.log(this.currentWeek);
      this.realDisplayInScreenData = this.currentWeek;

      //   当保存周日期的最后一个日期月份大于currentMonthIndex时候,月份改变
      if (this.moment(this.currentWeek[6]).month() > this.currentMonthIndex) {
        this.currentMonthIndex++;
      }
    },
    getCurrentMonth() {
      let moment = this.moment();
      let currentMonth = this.moment().month(this.currentMonthIndex).date(1);
      let endDay = this.moment(
        currentMonth.format("YYYY-MM"),
        "YYYY-MM"
      ).daysInMonth(); // 31

      let days = [];

      for (let i = 1; i <= endDay; i++) {
        // days.push(moment.date(i).format("YYYY-MM-DD"));
        let item = currentMonth.date(i).format("YYYY-MM-DD");
        days.push(item);
        // console.log(currentMonth.date(i).format("YYYY-MM-DD"));
      }
      this.currentMonth = days;
      this.realDisplayInScreenData = this.currentMonth;

      console.error(currentMonth.date(1));
      let firstDayOfMonth = currentMonth.date(1);
      let firstDayWeekDayOfMonth = firstDayOfMonth.isoWeekday();

      //   将本月1日前面的日期补充到数组中
      this.disabledBefore = [];
      for (let i = 1; i < firstDayWeekDayOfMonth; i++) {
        let disabledDate = currentMonth
          .subtract(i, "days")
          .format("YYYY-MM-DD");
        this.disabledBefore.unshift(disabledDate);
        currentMonth.add(i, "days");
      }

      currentMonth = this.moment().month(this.currentMonthIndex).date(1);
      console.error(currentMonth.format("YYYY-MM-DD"));

      //   将本月最后一天的日期补充到数组中
      console.log("本月第一天是星期几" + firstDayOfMonth);
      console.log("本月所有天", days);

      let lastDayOfMonth = currentMonth.date(endDay);
      console.error(lastDayOfMonth.format("YYYY-MM-DD"));
      let lastDayWeekDayOfMonth = lastDayOfMonth.isoWeekday();
      console.log("最后一天星期几" + lastDayWeekDayOfMonth);
      this.disabledAfter = [];
      if (lastDayWeekDayOfMonth != 7) {
        for (let i = lastDayWeekDayOfMonth + 1; i <= 7; i++) {
          let disabledDate = lastDayOfMonth.add(1, "days").format("YYYY-MM-DD");
          this.disabledAfter.push(disabledDate);
        }
      }
    },
    changePage(v) {
      console.log(this.selectedDate.format("YYYY-MM-DD"));
      // if (v < 1) return;
      // this.currentDate = v;
      // uni.showToast({
      //   title: "获取工作当天的工作计划",
      // });
    },
    transformShape($event) {
      $event.preventDefault();
    },
    transformStart($event) {
      console.log($event.changedTouches[0].clientY);
      console.log("开始滑动");
      this.position.start = $event.changedTouches[0].clientY;
    },
    transformEnd($event) {
      console.log($event.changedTouches[0].clientY);
      console.log("结束滑动");
      this.position.end = $event.changedTouches[0].clientY;
      let distance = this.position.end - this.position.start;
      if (distance > 100) {
        console.log("向下滑动");
        this.getCurrentMonth();
        this.realDisplayInScreenData = this.currentMonth;
        this.mode = "month";
      }
      if (distance < -100) {
        console.log("向上滑动");
        this.getCurrentWeeks();
        this.realDisplayInScreenData = this.currentWeek;
        this.mode = "week";
      }
    },
    preWeek() {
      if (this.mode == "week") {
        this.page--;
        this.getCurrentWeeks();
      } else {
        this.currentMonthIndex--;
        this.getCurrentMonth();
      }
    },
    nextWeek() {
      if (this.mode == "week") {
        this.page++;
        this.getCurrentWeeks();
      } else {
        this.currentMonthIndex++;
        this.getCurrentMonth();
      }
    },
    open() {
      this.$refs.calender.open();
    },
        open2() {
      this.$refs.calender.open1();
    },
  },
};
</script>

<style>
@import "@/plugin/colorui/common.less";
.selected {
  background-color: orange;
  color: white;
}
</style>
